<template>
    <div>
        <el-input
            v-model="modelValue.variableValue"
            :size="propJson.size"
            :style="execClass"
            :placeholder="propJson.placeHolder"
            :maxlength="propJson.isLengthLimit ? propJson.maxLength : -1"
            :show-word-limit="propJson.isLengthLimit"
            :disabled="propJson.isDisable"
            :clearable="propJson.isClearable"
            :type="propJson.isPassword ? 'password' : (propJson.isTextArea ? 'textarea' : '')"
            :autosize="autosizeRes"
        />
    </div>
</template>

<script name="InputComponent" setup lang="ts">

import {computed, defineProps} from "vue";

let props = defineProps(['propJson', 'commonParam']);

let propJson = computed(() => {return props['propJson']})
let commonParam = computed(() => {return props['commonParam']})

let execClass = computed(() => {
    let resStyle = "width: 100%;"
    if (propJson.value.editFlag) {
        resStyle += "pointer-events: none;";
    }
    return resStyle;
})

let modelValue  = computed(() => {
    for (let i = 0; i < commonParam.value.length; i++) {
        let info = commonParam.value[i];
        if (propJson.value.bindVariable === info.variableName) {
            return info
        }
    }
    return {}
})

let autosizeRes = computed(() => {
    if (!propJson.value.isTextArea) {
        return false
    }
    if (propJson.value.isAutoSize) {
        return true
    }
    return {minRows: parseInt(propJson.value.textAreaMinRow), maxRows: parseInt(propJson.value.textAreaMaxRow)}
})
</script>

<style scoped lang="less">

</style>